<template>
	<view class="">
		<view class="c content1" v-if="pre" >
			<view class="" v-for="(item,i) in 100" :key="i">
				{{preContent}}
			</view>
		</view>
		<view class="c content" id="page" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
			@touchcancel="touchcancel"
			:style="{transform:`translateX(${move}px)`, transition: `transform ${isAnimation ? time:0 }s`}"
			v-for="(item,i) in 1" :key="i">
			<view class="" v-for="(item,i) in 100" :key="i">
				{{content}}
			</view>
		</view>
		<view class="c content2" v-if="next">
			<view class="" v-for="(item,i) in 100" :key="i">
				{{nextContent}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				move: 0, // 位移距离
				pageXwidth: 0, // 记录手势第一次触碰的区域
				screenWidth: 0, // 屏幕的宽度
				saveScreenWidth: 0, // 记录屏幕的总宽度（二次赋值）
				isAnimation: true, //是否赋予当前动作动画 
				time: .5, // 动画时间
				next:false,
				pre:false,
				content:"",
				nextContent:"",
				preContent:"",
				page:2
			}
		},
		onReady() {
			let v = uni.getSystemInfoSync().windowHeight // 视口高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#page').boundingClientRect(data => {
				this.pageXwidth = data.width
				this.screenWidth = data.width
				this.saveScreenWidth = data.width
			}).exec();
		},
		mounted() {
			this.preContent="第1页"
			this.content="第2页"
			this.nextContent="第3页"
		},
		methods: {
			// 开始
			touchstart(e) {
				this.isAnimation = true
				let pageX = e.touches[0].pageX
				let pageY = e.touches[0].pageY
				this.pageXwidth = pageX
				this.pageX = pageX
			},
			// 翻页
			touchmove(e) {
				let pageXwidth = this.pageXwidth
				let pageX = e.touches[0].pageX
				let pageY = e.touches[0].pageY
				let screenWidth = this.screenWidth
				let saveScreenWidth = this.saveScreenWidth
				// 判页面是前进还是后退
				if(!this.next && !this.pre){
					if (pageX < pageXwidth) {
						this.next = true
						this.move = (screenWidth - (pageXwidth - pageX)) - saveScreenWidth
					} else {
						this.pre = true
						this.move = -1 * (pageXwidth - pageX)
					}
				}
			
				// 如果当前页面前进
				if(this.next){
					let w = (screenWidth - (pageXwidth - pageX)) - saveScreenWidth
					this.nextContent = "第" + (this.page + 1) + '页'
					this.$forceUpdate()
					if(w > 0){
						this.move = 0
					}else{
						this.move = w
					}
					
				}
				// 如果当前页面后退
				if(this.pre){
					let w = -1 * (pageXwidth - pageX)
					this.preContent="第" + (this.page - 1) + '页'
					this.$forceUpdate()
					if(w > 0){
						this.move = w
					}else{
						this.move = 0
					}
				}
				this.pageX = pageX
				console.log(pageX,this.move,pageXwidth)
				console.log(this.next, this.pre)
			},
			// 翻页结束
			touchend(e) {
				let screenWidth = this.screenWidth
				let pageXwidth = this.pageXwidth
				let pageX = this.pageX
				// 如果没有进行翻页
				if(!this.pre && !this.next){
					this.move = 0
				}
				console.log(pageX , pageXwidth)
				//前进
				if(pageX > pageXwidth){
					this.move = screenWidth
				}else if(pageX < pageXwidth){
					this.move = -screenWidth
				}else if(pageX == pageXwidth && (screenWidth/2 - 50) < pageX  &&  pageX < (screenWidth/2 + 50)){
					console.log(screenWidth/2 - 50 , pageX ,screenWidth/2 + 50)
					return this.$toast("点击了中间")
				}
				else if(pageX == pageXwidth && pageX < screenWidth/2){
					this.move = screenWidth
					this.pre = true
				}else if(pageX == pageXwidth && pageX > screenWidth/2){
					this.move = -screenWidth
					this.next = true
				}
				
				setTimeout(()=>{
					this.isAnimation = false
					this.move = 0
					if(this.next){
						this.page++
					}else{
						this.page--
					}
					this.preContent="第" + (this.page - 1) + '页'
					this.nextContent="第" + (this.page + 1) + '页'
					console.log(this.preContent)
					this.content="第" + this.page + '页'
					this.pre = false
					this.next = false
				},500)
				
				// this.move = 0
			},
			touchcancel(e) {
				console.log(e)
			},
		}
	}
</script>

<style>
	.content {
		position: absolute;
		background: #00e6b1;
		height: 100%;
		width: 100%;
		top: 0;
		z-index: 2;
		box-shadow: 0px 0px 5px #888888;
	}

	.content2 {
		position: absolute;
		background: #00e6b1;
		height: 100%;
		width: 100%;
		top: 0;
		z-index: 1;
	}
	.content1 {
		position: absolute;
		background: #00e6b1;
		height: 100%;
		width: 100%;
		top: 0;
		z-index: 1;
	}
	.c{
		display: flex;
		flex-wrap: wrap;
	}
</style>
